
<template>
  <div ref="pdfContent">
    <eventTrends :chartData="barchartData1" title="按日统计分析" />
    <eventTrends :chartData="barchartData2" title="按资产名称统计分析" />
    <eventTrends :chartData="barchartData3" title="按部门时长统计分析" />
    <piechart :chartData="pieData" title="按时长类型统计分析" />
    <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px">
      <el-table-column label="序号" width="60" type="index"> </el-table-column>
      <el-table-column label="部门" show-overflow-tooltip prop="Department" width="120px"></el-table-column>
      <el-table-column label="资产名称" show-overflow-tooltip prop="DeviceName" width="160px"></el-table-column>
      <el-table-column label="使用者" show-overflow-tooltip prop="UserName" width="120px"></el-table-column>
      <el-table-column label="活跃时长" prop="ActiveTime" :formatter="formatDuration" show-overflow-tooltip></el-table-column>
      <el-table-column label="屏保时长" prop="ScreenSaverTime" :formatter="formatDuration" show-overflow-tooltip></el-table-column>
      <el-table-column label="锁屏时长" prop="LockedTime" :formatter="formatDuration" show-overflow-tooltip></el-table-column>
      <el-table-column label="离开时长" prop="IdleTime" :formatter="formatDuration" show-overflow-tooltip></el-table-column>
      <el-table-column label="总运行时长" prop="TotalTime" :formatter="formatDuration" show-overflow-tooltip></el-table-column>
    </el-table>
    <button @click="exportPDF">导出为 PDF</button>
  </div>
</template>

<script>
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import eventTrends from './barchart.vue'  //柱状图
import piechart from "./piechart.vue";
import { formatDuration } from "@/utils/index.js";


export default {
  name: 'ExportMultipleEChartsAndTableToPDF',
  components: { eventTrends, piechart }, 
  props: {
    barchartData1: {
      type: Object
    },
    barchartData2: {
      type: Object
    },
    barchartData3: {
      type: Object
    },
    pieData: {
      type: Array
    },
    tableData: {
      type: Array
    }
  },
  data() {
    return {
      // barchartData1: { xAxis: [], series: [] },
      // barchartData2: { xAxis: [], series: [] },
      // barchartData3: { xAxis: [], series: [] },
      // pieData: [],
      // tableData: []
    };
  },
  methods: {
    formatDuration(row, column, value) {
      if (column.property === 'TotalTime' || !row.TotalTime) return formatDuration(value);
      return `${formatDuration(value)} (${((value / row.TotalTime) * 100).toFixed(1)}%)`;
    },
    async exportPDF() {
      const element = this.$refs.pdfContent
      const canvas = await html2canvas(element, {
        scale: 2, // 提高分辨率
        useCORS: true // 如果有图片，开启跨域
      })

      const imgData = canvas.toDataURL('image/png')
      const pdf = new jsPDF('p', 'mm', 'a4')
      const pageWidth = pdf.internal.pageSize.getWidth()
      const pageHeight = pdf.internal.pageSize.getHeight()

      const imgWidth = pageWidth
      const imgHeight = (canvas.height / canvas.width) * imgWidth

      // 如果内容超出一页，添加分页
      let position = 0
      if (imgHeight < pageHeight) {
        pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight)
      } else {
        while (position < imgHeight) {
          pdf.addImage(imgData, 'PNG', 0, -position, imgWidth, imgHeight)
          position += pageHeight
          if (position < imgHeight) pdf.addPage()
        }
      }

      pdf.save('导出文件.pdf')
    },
  },
};
</script>

<style scoped>
.chart {
  height: 400px;
  width: 100%;
  margin-bottom: 20px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.table th,
.table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.table th {
  background-color: #f2f2f2;
}
</style>